<template>
    <div id="post-footer">
        <div class="post-footer-input">
            <button type="text" @click="toComment()" id="toComment">点击输入评论</button>
        </div>
        <div class="post-footer-intereact">
            <van-icon name="comment-o" size="25px" id="footer-comment" @click="scrollToTop()"/>
            <van-icon :name="collectIcon" size="25px" id="footer-star" @click="toCollect()"/>
            <van-icon name="share-o" size="25px" id="footer-share" @click="showShareBar()"/>
        </div>
        <van-share-sheet
        :show="showShare"
        title="立即分享给好友"
        :options="sharePptions"
        @close="closeShare()"
        @cancel="closeShare()"
        @select="onSelect"
        :close-on-click-overlay="true"
        />
        <!-- 评论评论 -->
        <input-comment 
            :toShow="showCommentInput" 
            :target="null"
            :target_said="null"
            :has_img="true"
            @commentClose="closeComment()"
            @commentSubmiit="getSubmiitedComment"
        ></input-comment>
        <!-- 评论评论结束 -->
    </div>
</template>

<script>
import {Popup, Sticky, Field, Button, Icon, ShareSheet} from 'vant'
import Comment from "./Comment.vue"
import {showStatusTip} from "@/utils/loginStatus.js"

export default {
    data(){
        return{
            showCommentInput: false,
            showShare: false,
            sharePptions: 
            [
                [
                    { name: 'QQ空间', icon: require('@/assets/icon/QQzone.png') },
                    { name: 'QQ', icon: 'qq' },
                    { name: '微博', icon: 'weibo' },
                    
                ],
                [
                    { name: '复制链接', icon: 'link' },
                    { name: '分享海报', icon: 'poster' },
                    { name: '二维码', icon: 'qrcode' },
                ],
            ],
            collectIcon: "star-o"
        }
    },
    components: {
        [Popup.name]:Popup,
        [Sticky.name]:Sticky,
        [Field.name]:Field,
        [Button.name]:Button,
        [Icon.name]:Icon,
        [ShareSheet.name]:ShareSheet,
        'input-comment': Comment
    },
    methods:{
        //分享到微博
        toweibo(){
            console.log(window.location.href)
            var sharesinastring ='http://service.weibo.com/share/share.php?title=' +
                encodeURIComponent(this.author + '「' + this.content.substring(0, 10) + '...' + '」' + ' 点这里' + window.location.href);
                window.open(sharesinastring, '_blank');//微博在新页面打开
        },
        //分享到QQ
        toqq(){
            var _shareUrl ='https://connect.qq.com/widget/shareqq/index.html?';
                _shareUrl += 'url=' + encodeURIComponent('_' + window.location.href || window.location.href); 
                _shareUrl += '&title=' + encodeURIComponent(this.content.substring(0, 10) + '...'|| '自定义'); 
                window.open(_shareUrl, '_blank');//qq
        
        },
        //分享到QQ空间
        toqqkj(){
            var sharesinastring ='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=' 
            sharesinastring += encodeURIComponent("帖子") 
            sharesinastring += '&desc='
            sharesinastring += encodeURIComponent(this.content.substring(0, 10) + '...') 
            sharesinastring += '&summary='
            sharesinastring += encodeURIComponent(this.content.substring(0, 10) + '...') 
            sharesinastring += '&url=' 
            sharesinastring += encodeURIComponent(window.location.href);
            window.open(sharesinastring, '_blank');//qq空间
        
        },
        //打开评论输入框
        toComment(){
            if (sessionStorage.getItem("username") == null){
                showStatusTip(null, "\n游客登陆无法评论")
             }
             else if(sessionStorage.getItem("username") != null && sessionStorage.getItem("visitor") == 'true') {
                showStatusTip(null, "\n未审核用户无法评论")
             }else{
                 this.showCommentInput = true
             }
            
        },
        //关闭评论输入框
        closeComment(){
            this.showCommentInput = false
        },
        //获取评论的内容并触发父组件的addMain函数
        //to: 评论的帖子的id
        //content: 评论的内容
        //images: 评论的图片
        getSubmiitedComment(to, content, images){
            this.$emit('addMain', content, images)
            this.showCommentInput = false
        },
        //点击评论滑动到顶部
        scrollToTop(){
            document.documentElement.scrollTop = 0
        },
        //点击显示分享面板
        showShareBar(){
            console.log(this.author)
            this.showShare = true
        },
        //关闭分享面板
        closeShare(){
            this.showShare = false
        },
        //点击的响应事件
        onSelect(option) {
            if (sessionStorage.getItem("username") == null){
                showStatusTip(null, "\n游客登陆无法转发")
                setTimeout(()=>{
                 this.$router.push('/login')
                }, 1500)
                    
            }
            else if(sessionStorage.getItem("username") != null && sessionStorage.getItem("visitor") == 'true') {
                showStatusTip(null, "无法转发")
            }
            else{
                if (option.name == '微博')
                    this.toweibo()
                if (option.name == 'QQ')
                    this.toqq()
                if (option.name == 'QQ空间')
                    this.toqqkj()
            }
        },
        //收藏
        toCollect(){
            let node = document.getElementById("footer-star")
            if (node.className == "van-badge__wrapper van-icon van-icon-star-o")
                this.collectIcon = "star"
            if (node.className == "van-badge__wrapper van-icon van-icon-star")
                this.collectIcon = "star-o"
        }
    },
    props: {
        content: {
            type: String,
        },
        author: {
            type: String,
        },
    },
    emits: ['addMain'],

}
</script>

<style scoped>
#post-footer{
    position: fixed;
    width: 100%;
    bottom: 0px;
    height: 50px;
    display: flex;
    text-align: left;
    background-color: rgb(238, 238, 238);
}

.post-footer-input{
    width: 200px;
}

.post-footer-input button{
    text-align: left;
    margin-top: 10px;
    margin-left: 10px;
    border: 0px;
    border-radius: 15px;
    width: 200px;
    height: 28px;
    font-size: 15px;
    padding-left: 10px;
    background-color: rgb(214, 214, 214);
}

.post-footer-intereact{
    display: flex;
    margin-left: 37px;
}

#footer-comment{
    margin-top: 15px;
}

#footer-star{
    margin-top: 12px;
    margin-left: 25px;
}

#footer-share{
    margin-top: 14px;
    margin-left: 25px;
}
</style>